<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>项目管理系统</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
 <div class="outer-wrap">
  <div class="login">
    <div class="header">
      <h2>项目管理系统</h4>
    </div>
  <form class="layui-form" method="post">
   <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="loginName" placeholder="请输入用户名" required lay-verify="required" autocomplete="off" class="layui-input" style="width:80%;">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" placeholder="请输入密码" required lay-verify="required" autocomplete="off" class="layui-input" style="width:80%;">
    </div>
  </div>
  <div class="layui-form-item footer">
    <div class="layui-input-block" style="margin-left: 206px;">
      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
</div>
 </div>
<script src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
  var form = layui.form;
  // layer.msg('Hello World');
  // 
  form.on('submit(*)', function(data){
    $.ajax({
               type: "post",
                url: "http://localhost:9014/login/search",
                data:data.field,
                dataType:"json",
                success:function(d){
                    if(d.msg == "success"){
                        layer.msg("请求成功");
                        window.open('index.html?id='+d.data.id,'_self');
                    }else{
                        layer.msg("用户名或密码错误");
                    }
                }
            });
   return false;
  });
});
</script> 
</body>
</html>